<template>
  <div>
    <h3>{{ mysubstr(title) }}</h3>
    <hr />
    <h3>{{ substrFn() }}</h3>
  </div>
</template>

<script>
// 混入可以把vue配置对象中的所有的配置都可以混入
// 局部混入 对象
/* const mixinObj = {
  // data中的数据如果和混入相同，则组件中的data数据源优先级更高
  data() {
    return {
      title: "abcdefg",
    };
  },
  methods: {
    // methods中的方法，如果组件中的methods没有此方法，则给组件添加此方法
    // 如果组件中的methods方法中有此方法，则组件中的methods方法的优先级更高
    mysubstr(str = "") {
      return str.substr(0, 3) + "...";
    },
  },

  // 生命周期混入
  // 生命周混入不会进行优先级的替换，只会以数据的方式合并，并全部都执行
  // 执行的顺序  全局混入 >  局部混入  > 组件内生命周期
  created() {
    console.log("局部混入的内的生命周期-- created");
  },
};
 */

// 完成是否登录操作
import login from "@/mixin/login";

export default {
  // 生命周期
  created() {
    console.log("组件内的生命周期-- created");
  },
  data() {
    return {
      // 优先级更高
      title: "1点点、茶百道、7分甜、都可、熊姬都出事了！这样的奶茶还想喝吗？",
    };
  },
  // 组件内混入
  // mixins: [mixinObj],
  mixins: [login],
  methods: {
    mysubstr(str = "") {
      return str.substr(0, 10) + "...";
    },
    substrFn() {
      return "abc";
    },
  },
};
</script>

<style lang='scss' scoped>
</style>